<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吃啥大转盘</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            max-width: 800px;
            width: 100%;
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

        .wheel-container {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 0 auto 30px;
        }

        #wheelCanvas {
            width: 100%;
            height: 100%;
            transition: transform 4s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .pointer {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
            border-top: 40px solid #ff4757;
            z-index: 10;
        }

        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
        }

        .btn-primary {
            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
            color: white;
        }

        .btn-secondary {
            background: linear-gradient(45deg, #4834d4, #686de0);
            color: white;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .input-section {
            margin-bottom: 20px;
        }

        .input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }

        input[type="text"] {
            flex: 1;
            padding: 10px 15px;
            border: 2px solid #ddd;
            border-radius: 10px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }

        input[type="text"]:focus {
            outline: none;
            border-color: #667eea;
        }

        .items-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }

        .item-tag {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .remove-btn {
            background: rgba(255,255,255,0.3);
            border: none;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            cursor: pointer;
            font-size: 12px;
        }

        .result {
            text-align: center;
            margin-top: 20px;
            padding: 20px;
            background: linear-gradient(45deg, #ff9a9e, #fecfef);
            border-radius: 15px;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .spinning {
            animation: pulse 0.5s infinite alternate;
        }

        @keyframes pulse {
            from { transform: scale(1); }
            to { transform: scale(1.05); }
        }

        .history {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 10px;
        }

        .history h3 {
            margin-bottom: 10px;
            color: #333;
        }

        .history-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .history-item {
            background: #e9ecef;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 12px;
            color: #495057;
        }

        @media (max-width: 768px) {
            .wheel-container {
                width: 300px;
                height: 300px;
            }
            
            .container {
                padding: 20px;
            }
            
            h1 {
                font-size: 2em;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎯 吃啥大转盘</h1>
        
        <div class="wheel-container">
            <div class="pointer"></div>
            <canvas id="wheelCanvas" width="400" height="400"></canvas>
        </div>

        <div class="controls">
            <button class="btn btn-primary" id="spinBtn" onclick="spin()">🎲 开始转动</button>
            <button class="btn btn-secondary" onclick="resetWheel()">🔄 重置转盘</button>
            <button class="btn btn-secondary" onclick="clearAll()">🗑️ 清空所有</button>
        </div>

        <div class="input-section">
            <div class="input-group">
                <input type="text" id="itemInput" placeholder="输入转盘项目（如：一等奖、谢谢参与等）" maxlength="20">
                <button class="btn btn-secondary" onclick="addItem()">➕ 添加</button>
            </div>
            <div class="items-list" id="itemsList"></div>
        </div>

        <div class="result" id="result">点击"开始转动"来抽取！</div>

        <div class="history">
            <h3>📋 抽取历史</h3>
            <div class="history-list" id="historyList"></div>
        </div>
    </div>

    <script>
        let wheelItems = ['烩面', '麻辣烫', '米饭', '汉堡', '减脂餐', '炒米粉'];
        let isSpinning = false;
        let currentRotation = 0;
        let history = [];

        // 初始化
        window.onload = function() {
            updateItemsList();
            drawWheel();
        };

        // 添加项目
        function addItem() {
            const input = document.getElementById('itemInput');
            const item = input.value.trim();
            
            if (item === '') {
                alert('请输入项目内容！');
                return;
            }
            
            if (wheelItems.length >= 20) {
                alert('最多只能添加20个项目！');
                return;
            }
            
            wheelItems.push(item);
            input.value = '';
            updateItemsList();
            drawWheel();
        }

        // 删除项目
        function removeItem(index) {
            if (wheelItems.length <= 2) {
                alert('至少需要保留2个项目！');
                return;
            }
            
            wheelItems.splice(index, 1);
            updateItemsList();
            drawWheel();
        }

        // 更新项目列表显示
        function updateItemsList() {
            const list = document.getElementById('itemsList');
            list.innerHTML = '';
            
            wheelItems.forEach((item, index) => {
                const tag = document.createElement('div');
                tag.className = 'item-tag';
                tag.innerHTML = `
                    ${item}
                    <button class="remove-btn" onclick="removeItem(${index})">×</button>
                `;
                list.appendChild(tag);
            });
        }
        // 绘制转盘 - 字体更清晰 + 底色更耐看
function drawWheel() {
    const canvas = document.getElementById('wheelCanvas');
    const ctx    = canvas.getContext('2d');
    const cenX   = canvas.width / 2;
    const cenY   = canvas.height / 2;
    const radius = 180;
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const anglePerItem = (2 * Math.PI) / wheelItems.length;

    /* ------ 莫兰迪色系 ------ */
    const colors = [
        ['#a3c1ad','#c5d5c9'], ['#e5c5c5','#f0dada'], ['#d4b5a0','#e6c9b1'],
        ['#a9b7c6','#c3d0dc'], ['#b8a9c9','#d0c3dd'], ['#c5c5c5','#dddddd'],
        ['#a8d8ea','#c7e9f5'], ['#f7c5c5','#ffe2e2'], ['#c8d6a0','#dfe4b3'],
        ['#efb7b7','#ffd1d1'], ['#a0c4c4','#c0e0e0'], ['#d9b3e6','#ebd6f5'],
        ['#b3b3cc','#d0d0e8'], ['#f0e0a1','#fcf4d0'], ['#d1e0a7','#eaf0c9'],
        ['#e8b7d4','#f9d8eb'], ['#b5d8d7','#d8f0ef'], ['#d9c2a8','#f0e4d0'],
        ['#c1a3d3','#e0d0f0'], ['#a2c5e3','#d0e6f7']
    ];

    wheelItems.forEach((item, idx) => {
        const start = idx * anglePerItem;
        const end   = (idx + 1) * anglePerItem;

        /* 渐变色 */
        const grad = ctx.createRadialGradient(cenX, cenY, 0, cenX, cenY, radius);
        grad.addColorStop(0, colors[idx % colors.length][0]);
        grad.addColorStop(1, colors[idx % colors.length][1]);

        /* 扇形 */
        ctx.beginPath();
        ctx.moveTo(cenX, cenY);
        ctx.arc(cenX, cenY, radius, start, end);
        ctx.closePath();
        ctx.fillStyle = grad;
        ctx.fill();
        ctx.strokeStyle = '#fff';
        ctx.lineWidth = 3;
        ctx.stroke();

        /* 文字：更大、更粗、白边阴影 */
        ctx.save();
        ctx.translate(cenX, cenY);
        ctx.rotate(start + anglePerItem / 2);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillStyle = '#2c3e50';                 // 深灰字
        ctx.font = 'bold 18px "Helvetica Neue", Arial, sans-serif';
        ctx.shadowColor = 'rgba(255,255,255,0.8)';
        ctx.shadowBlur = 4;
        ctx.fillText(item, radius * 0.68, 0);
        ctx.restore();
    });

    /* 中心圆 */
    ctx.beginPath();
    ctx.arc(cenX, cenY, 30, 0, 2 * Math.PI);
    ctx.fillStyle = '#34495e';
    ctx.fill();
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 4;
    ctx.stroke();

    ctx.fillStyle = '#fff';
    ctx.font = 'bold 16px "Helvetica Neue", Arial, sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('START', cenX, cenY);
            
            // 绘制中心文字
            ctx.fillStyle = '#fff';
            ctx.font = 'bold 16px Microsoft YaHei';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('START', centerX, centerY);
        }

        // 转动转盘
        function spin() {
            if (isSpinning) return;
            if (wheelItems.length < 2) {
                alert('请至少添加2个项目！');
                return;
            }
            
            isSpinning = true;
            const spinBtn = document.getElementById('spinBtn');
            const result = document.getElementById('result');
            
            spinBtn.disabled = true;
            spinBtn.textContent = '转动中...';
            result.classList.add('spinning');
            result.textContent = '转盘转动中，请稍候...';
            
            // 随机选择结果
            const randomIndex = Math.floor(Math.random() * wheelItems.length);
            const anglePerItem = 360 / wheelItems.length;
            const targetAngle = randomIndex * anglePerItem + anglePerItem / 2;
            
            // 计算转动角度（多转几圈 + 目标角度）
            const spins = 5 + Math.random() * 5; // 5-10圈
            const finalRotation = currentRotation + spins * 360 + (360 - targetAngle);
            
            // 应用转动
            const canvas = document.getElementById('wheelCanvas');
            canvas.style.transform = `rotate(${finalRotation}deg)`;
            
            currentRotation = finalRotation % 360;
            
            // 等待转动结束
            setTimeout(() => {
                isSpinning = false;
                spinBtn.disabled = false;
                spinBtn.textContent = '🎲 开始转动';
                result.classList.remove('spinning');
                
                const selectedItem = wheelItems[randomIndex];
                result.textContent = `🎉 恭喜抽到：${selectedItem}！`;
                
                // 添加到历史记录
                addToHistory(selectedItem);
            }, 4000);
        }

        // 添加到历史记录
        function addToHistory(item) {
            const timestamp = new Date().toLocaleTimeString();
            history.unshift({ item, time: timestamp });
            
            // 只保留最近10条记录
            if (history.length > 10) {
                history = history.slice(0, 10);
            }
            
            updateHistoryDisplay();
        }

        // 更新历史记录显示
        function updateHistoryDisplay() {
            const historyList = document.getElementById('historyList');
            historyList.innerHTML = '';
            
            history.forEach(record => {
                const item = document.createElement('div');
                item.className = 'history-item';
                item.textContent = `${record.time} - ${record.item}`;
                historyList.appendChild(item);
            });
        }

        // 重置转盘
        function resetWheel() {
            if (isSpinning) return;
            
            currentRotation = 0;
            const canvas = document.getElementById('wheelCanvas');
            canvas.style.transform = 'rotate(0deg)';
            
            document.getElementById('result').textContent = '点击"开始转动"来抽取！';
        }

        // 清空所有项目
        function clearAll() {
            if (isSpinning) return;
            if (confirm('确定要清空所有项目吗？')) {
                wheelItems = [];
                history = [];
                updateItemsList();
                updateHistoryDisplay();
                drawWheel();
                document.getElementById('result').textContent = '请添加转盘项目后再开始！';
            }
        }

        // 回车键添加项目
        document.getElementById('itemInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                addItem();
            }
        });
    </script>
</body>
</html>